<script setup lang="ts">
import {nextTick, ref} from 'vue'
import NavBar from '@/components/NavBar.vue'
import {keyBind} from '@/utils/keymasterTool.ts'

const isRouterAlive = ref(true)

function refreshPage() {
  isRouterAlive.value = false
  nextTick(function () {
    isRouterAlive.value = true
  })
}

keyBind('f5', 'refresh', refreshPage)
</script>

<template>
  <NavBar/>
  <div class="custom-a-image">
    <router-view v-if="isRouterAlive"/>
  </div>
</template>

<style lang="scss" scoped>
.custom-a-image :deep(.ant-image-mask-info) {
  // 将div下的所有元素隐藏文字大小为0 visibility: hidden;
  font-size: 0;
}
.custom-a-image :deep(.ant-image-mask-info span) {
  // 再单独给span标签添加样式 让其显示并且给出文字大小 visibility: visible;
  font-size: 20px;
}

.custom-a-image :deep(.ant-image .ant-image-img) {
  border-radius: 5px;
}
.custom-a-image :deep(.ant-image-mask) {
  border-radius: 5px;
}
</style>
